<template>
  <div class="pagination">
    <!-- 分页 -->
    <el-pagination background @size-change="onSizeChange" @current-change="onCurrentChange" :current-page="currentPage"
      :page-sizes="pageSizes" :page-size="pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper" />
  </div>
</template>

<script>
export default {
  name: "Pagination",
  emits: ["update:currentPage", "update:pageSize", "pagination-change"],
  props: {
    /**
     * 当前页码
     * @type {Number}
     */
    currentPage: {
      type: Number,
      required: true,
    },

    /**
     * 每页条数
     * @type {Number}
     */
    pageSize: {
      type: Number,
      required: true,
    },

    /**
     * 数据总条数
     * @type {Number}
     */
    total: {
      type: Number,
      required: true,
    },

    /**
     * 每页条数可选项
     * @type {Array}
     */
    pageSizes: {
      type: Array,
      default: () => [10, 20, 50, 100],
    },
  },

  methods: {
    /**
     * 切换页面大写
     * @param size 每页显示条数
     * @returns {void}
     */
    onSizeChange(size) {
      this.$emit("update:pageSize", size);
      this.$emit("pagination-change", {
        currentPage: this.currentPage,
        pageSize: size,
      });
    },


    /**
     * 切换页面
     * @param page 页码
     * @returns {void}
     */
    onCurrentChange(page) {
      this.$emit("update:currentPage", page);
      this.$emit("pagination-change", {
        currentPage: page,
        pageSize: this.pageSize,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/** 分页样式 */
.pagination {
  display: flex;
  justify-content: right;
  margin-top: 40px;
}
</style>
